<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    用户名：<input type="text" name="username" id="username">
    <span id="msg">请输入用户名</span>
    <br>
    密码：<input type="password" name="password" id="password">
    <br>
    <input type="submit" value="注册">
</form>

<script>
    document.getElementById("username").onblur=function () {
        //发送ajax请求到服务器中请求当前用户名是否在数据库中存在
        var xhttp = new XMLHttpRequest();//创建对象
        //确定请求信息
        xhttp.open("GET","http://localhost:8080/javaweb14/user/existsUserName?username="+this.value);
        xhttp.send();//发送请求

        xhttp.onreadystatechange=function () {
            if(this.readyState = 4 && this.status == 200){
                //响应成功后需要判断是否在数据库中存在该username
                if(this.responseText == "true"){
                    //用户名在数据库中找到了 提示用户名已存在
                    document.getElementById("msg").innerText="用户名已经存在，请换一个";
                }else{
                    //用户名不存在 提示用户名可用
                    document.getElementById("msg").innerText="用户名可用";
                }

            }

        }





        // document.getElementById("msg").innerHTML="失去了光标";
    }
</script>

</body>
</html>